<template>
	<view>
		<view class="plAll">
			<view class="leftAvatar">
				<headimg :realSrc="replyList.avatar ? replyList.avatar : defimg"></headimg>
				<!-- <image :src="replyList.avatar ? replyList.avatar : defimg"></image> -->
			</view>
			<view class="plInfo">
				<view class="plInfo_detail">
					<view class="plName">{{ replyList.users_name }}</view>
				</view>
				<view class="plCont" v-html="replyList.reply_text"></view>
				<view class="cont_info">
					<view class="num">{{ replyList.time }}<text v-if="replyList.user_id == user_id" @tap="deleteItem(replyList.article_reply_id,replyList.article_id,0,0)">删除</text></view>
					<view class="zan" :class="[replyList.is_like == 1 ? 'zan_active' : 'i']" @tap="giveUp(replyList.article_reply_id,replyList.is_like)">
						<i class="iconfont1 iconzan"></i>{{ replyList.likenum }}
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in replyList.answer" :key="index">
			<view class="leftAvatar">
				<headimg :realSrc="item.avatar ? item.avatar : defimg"></headimg>
				<!-- <image :src="item.avatar ? item.avatar : defimg"></image> -->
			</view>
			<view class="plInfo">
				<view class="plInfo_detail">
					<view class="plName" @tap="huifu(item.article_reply_id,item.users_name)">{{ item.users_name }}</view>
					<view class="zan" :class="[item.is_like == 1 ? 'zan_active' : 'i']" @tap="giveUp(item.article_reply_id,item.is_like)">
						<i class="iconfont1 iconzan"></i>{{ item.likenum }}
					</view>
				</view>
				<view class="huifu"> <text v-if="item.answer_id != 0 && item.answer_id == v.article_reply_id" v-for="(v,k) in replyList.answer"
					 :key="k">回复{{v.users_name}}：</text>{{item.reply_text}}</view>
				<view class="cont_info">
					<view class="num">{{ item.time }}<text v-if="item.user_id == user_id" @tap="deleteItem(item.article_reply_id,item.article_id,index,1)">删除</text></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<input type="text" v-model="apply_text" :placeholder="placeholder" placeholder-class="input" @focus="inputFocus"
			 @blur="inputBlur" />
			<view class="send" :class="[isFoucs ? '' : 'vague']" @tap="send">发送</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				isFoucs: false,
				article_id: '',
				article_reply_id: '',
				replyList: {}, //评论详情 
				apply_text: '', //评论内容
				answer_id: 0,
				answer_name: '',
				placeholder: '参与评论~',
				user_id: '',
				stateType: '', // 0为默认抖教文章
				addType: '', //附加条件: 0+0为首页抖教推荐  0+1为智囊团  1+3为家文化&孩子-目标、成长、才艺  2+2为育儿经&育儿经-我的  3+4为我的智囊团
				defimg: this.defimg
			}
		},
		components: {
			headimg,
		},
		onLoad(e) {
			this.stateType = e.stateType;
			this.addType = e.addType;
			this.article_id = e.article_id;
			this.article_reply_id = e.article_reply_id;
			this.user_id = uni.getStorageSync('userInfo').id;
			this.getComment();
		},
		methods: {
			/* 获取评论列表 */
			getComment() {
				var data = {
					article_id: this.article_id,
					article_reply_id: this.article_reply_id
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/listsReply';
				} else {
					url = 'user/article.Users/listsReply';
				}
				this.$zapi.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data[0];
						list.time = util.getBriefTime(list.crate_time);
						for (var i = 0; i < list.answer.length; i++) {
							list.answer[i].time = util.getBriefTime(list.answer[i].crate_time);
						}
						this.replyList = list;
					} else {
						this.replyList = [];
					}
				})
			},
			/* 回复 */
			huifu(article_reply_id, users_name) {
				this.answer_id = article_reply_id;
				this.answer_name = users_name;
				this.inputFocus();
			},
			/* 获取焦点 */
			inputFocus() {
				this.isFoucs = true;
				if (this.answer_name) {
					this.placeholder = '回复' + this.answer_name + ':';
				} else {
					this.placeholder = '回复' + this.replyList.users_name + ':';
				}
			},
			/* 失去焦点 */
			inputBlur() {
				this.isFoucs = false;
			},
			/* 发送评论 */
			send() {
				var data = {
					article_id: this.article_id,
					text: this.apply_text,
					pid: this.article_reply_id,
					answer_id: this.answer_id
				}
				if(!this.apply_text) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
					return
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/addReply';
				} else {
					url = 'user/article.Users/addReply';
				}
				this.$zapi.apiPost(url, data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 200) {
						this.getComment();
						this.apply_text = '';
						this.placeholder = '参与评论~';
						this.answer_id = 0;
					}
				})
			},
			/* 点赞 & 取消点赞 */
			giveUp(article_reply_id, is_like) {
				var data = {
					article_id: this.article_id,
					article_reply_id: article_reply_id
				}
				var url = '';
				if (this.addType == 1) {
					if (is_like == 1) {
						url = 'user/wisdom.Users/delReplyLike';
					} else {
						url = 'user/wisdom.Users/addReplyLike';
					}
				} else {
					if (is_like == 1) {
						url = 'user/article.Users/delReplyLike';
					} else {
						url = 'user/article.Users/addReplyLike';
					}
				}
				this.$zapi.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						if (article_reply_id == this.article_reply_id) {
							if (is_like == 1) {
								this.replyList.is_like = null;
								this.replyList.likenum--;
							} else {
								this.replyList.is_like = 1;
								this.replyList.likenum++;
							}
						} else {
							var da = this.replyList.answer;
							for (var i = 0; i < da.length; i++) {
								if (article_reply_id == da[i].article_reply_id) {
									if (is_like == 1) {
										da[i].is_like = null;
										da[i].likenum--;
									} else {
										da[i].is_like = 1;
										da[i].likenum++;
									}
								}
							}
						}
					}
				})
			},
			/* 删除评论 */
			deleteItem(article_reply_id, article_id, index, type) {
				var _this = this;
				uni.showModal({
					title: '删除提示',
					content: '确定要删除这条评论吗？',
					confirmColor: '#FF9900',
					success: function(res) {
						if (res.confirm) {
							var data = {
								article_reply_id: article_reply_id,
								article_id: article_id
							}
							var url = '';
							if (_this.addType == 1) {
								url = 'user/wisdom.Users/delReply';
							} else {
								url = 'user/article.Users/delReply';
							}
							_this.$zapi.apiPost(url, data).then(res => {
								if (res.data.code == 200) {
									if (type == 0) {
										uni.navigateBack({
											delta: 1
										})
									} else {
										_this.replyList.answer.splice(index, 1);
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 30upx 30upx 100upx;
		width: 690upx;
	}

	/* 评论 */
	.plAll {
		display: flex;
		justify-content: flex-start;
	}

	.leftAvatar,
	.leftAvatar image {
		width: 72upx;
		height: 72upx;
		margin-right: 10upx;
		border-radius: 50%;
	}

	.plInfo {
		width: 90%;
		position: relative;
	}

	.plInfo_detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.plInfo_detail view {
		line-height: 1;
	}

	.plName {
		color: #333333;
		font-size: 30upx;
	}

	.plCont {
		color: #333333;
		font-size: 26upx;
		margin-top: 20upx;
		overflow: hidden;
		word-break: break-all;
		word-wrap: break-word;
	}

	.cont_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10upx 0;
	}

	.num {
		color: #999999;
		font-size: 22upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.num text {
		color: #F25252;
		margin-left: 20upx;
	}

	.zan {
		color: #999999;
		font-size: 16upx;
		display: flex;
		align-items: center;
		line-height: 1;
	}

	.zan i {
		color: #999999;
		font-size: 50upx;
	}

	.zan_active {
		color: #FF4E78;
	}

	.zan_active i {
		color: #FF4E78;
	}

	/* 二级评论 */
	.list {
		display: flex;
		padding-left: 20upx;
		margin-top: 30upx;

		.leftAvatar {
			width: 64upx;
			height: 64upx;

			& image {
				width: 64upx;
				height: 64upx;
			}
		}

		.plName {
			color: #999999;
		}

		.huifu {
			color: #333333;
			font-size: 30upx;
		}

		.huifu text {
			color: #999999;
			font-size: 30upx;
		}

		.num {
			color: #CCCCCC;
			font-size: 26upx;
		}
	}

	/* 底部发送栏 */
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 690upx;
		padding: 0 30upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FAFAFA;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
	}

	.bottom input {
		width: 80%;
		background: #FFFFFF;
		border-radius: 8upx;
		padding-left: 20upx;
		height: 66upx;
		line-height: 66upx;
	}

	.bottom .input {
		color: #CCCCCC;
		font-size: 30upx;
	}

	.send {
		color: #FFFFFF;
		font-size: 34upx;
		background: #FF9900;
		border-radius: 8upx;
		padding: 16upx 20upx;
		line-height: 1;
	}

	.vague {
		opacity: 0.3;
	}
</style>
